<template>
  <div class="yiyuan">
    <div class="top">
      <h3>添加医院</h3>
      <div class="topbox">
        <div class="box">
          医院名称：
          <input type="text" v-model="form.name" />
        </div>
        <div class="box">
          医院地址：
          <input type="text" v-model="form.dizhi" />
        </div>
        <div class="box">
          医院类型：
          <input type="text" v-model="form.leixing" />
        </div>
        <div class="box">
          医院等级：
          <input type="text" v-model="form.dengji" />
        </div>
        <div class="button">
          <button @click="store.add(form)">添加</button>
        </div>
      </div>
    </div>

    <div class="bottom">
      <p>医院列表</p>
      <div class="buttonlist">
        <span>上架</span>
        <span>下架</span>
      </div>
      <div class="index_box">
        <el-table ref="multipleTableRef" :data="yiyuanlist" style="width: 100%">
          <el-table-column label="医院名称" width="100">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column property="img" label="医院头像" width="100">
            <template #default="scope">
              <img
                src="https://img0.baidu.com/it/u=1224977975,1987311585&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                alt=""
                style="widht: 40px; height: 40px; border-radius: 50%"
              />
            </template>
          </el-table-column>
          <el-table-column property="site" label="医院地址">
            <template #default="scope">{{ scope.row.dizhi }}</template>
          </el-table-column>
          <el-table-column property="type" label="医院类型" width="100">
            <template #default="scope">{{ scope.row.leixing }}</template>
          </el-table-column>
          <el-table-column property="class" label="医院等级" width="100">
            <template #default="scope">{{ scope.row.dengji }}</template>
          </el-table-column>
          <el-table-column property="caozuo" label="操作" width="200">
            <template #default="scope" >
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="xiangqing(scope.row)"
                >查看详情</el-button
              >
              <el-button link type="primary" size="small" @click="fun(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column
            property="address"
            label="Address"
            show-overflow-tooltip
          /> -->
        </el-table>
      </div>
    </div>
    <!-- <h1> {{data}} </h1> -->
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "@vue/reactivity";

const router = useRouter();

import { useyiliao } from "../../stores/counter";

let store = useyiliao();

let yiyuanlist = ref(store.yiyuan);

//双向绑定
var form = ref([
  {
    name: "",
    dizhi: "",
    leixing: "",
    dengji: "",
  },
]);

//去详情页
var xiangqing = (row) => {
  router.push({
    path: "/maxindex/yiyuandex/",
    query: { id:JSON.stringify(row)},
  });
  console.log(row);
};




//删除
var fun=(index)=>{
   var i = yiyuanlist.value.findIndex((item)=>{
    return item.id == index.id
  })
  if(i != -1){
    yiyuanlist.value.splice(i,1)
  }
}
</script>

<style lang="scss" scoped>
.yiyuan {
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.23);
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  .top {
    width: 100%;
    height: 100px;
    background-color: white;
    margin: 20px 0;
    padding-left: 20px;
    box-sizing: border-box;
    border-radius: 5px;

    h3 {
      height: 40px;
      font-size: 16px;
      // background-color: blue;
      line-height: 40px;
    }

    .topbox {
      width: 100%;
      height: 60px;
      // background-color: orange;
      line-height: 60px;
      display: flex;
      font-size: 12px;
      .box {
        margin-right: 10px;
        input {
          width: 110px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid rgba(128, 128, 128, 0.605);
          outline-color: rgba(0, 0, 255, 0.478);
        }
      }
      // form {
      //   margin: 0 20px;
      //   select {
      //     width: 130px;
      //     height: 30px;
      //     text-align: center;
      //     border: 1px solid rgba(128, 128, 128, 0.542);
      //     border-radius: 5px;
      //   }
      // }

      .button {
        button {
          width: 60px;
          height: 30px;
          margin: 0 5px;
          border-radius: 5px;
          border: none;
          &:hover {
            color: white;
            background-color: blue;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 470px;
    background-color: white;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: auto;
    p {
      width: 100%;
      height: 50px;
      // background-color: red;
      line-height: 50px;
      font-weight: 700;
    }
    .buttonlist {
      width: 100%;
      height: 50px;
      background-color: white;
      display: flex;
      align-items: center;
      position: sticky;
      top: -1px;
      z-index: 999;
      span {
        display: inline-block;
        padding: 5px 15px;
        border: 1px solid rgba(0, 0, 255, 0.314);
        margin-right: 20px;
        color: rgba(0, 0, 255, 0.433);
        border-radius: 5px;
        &:nth-child(1) {
          background-color: rgba(0, 0, 255, 0.808);
          color: white;
        }
        &:nth-child(2) {
          background-color: rgba(255, 0, 0, 0.64);
          color: white;
        }
      }
    }
  }
}
</style>